<template>
  <div class="filter-container">
    <div class="filter-item-top">
      <span>商品名称:{{ goodData.goodsName }}</span>
      <span
        >商品编号:{{ goodData.goodsId
        }}<el-button link type="primary" size="small" :icon="DocumentCopy" v-copy="goodData.goodsId"></el-button
      ></span>
    </div>
    <div class="filter-item-title">待分拣库存分布</div>
    <div class="filter-item-table">
      <table border="1" style="width: 100%; text-align: center; border-collapse: collapse">
        <tr style="font-size: 13px; color: white; background-color: #009688">
          <th style="padding: 10px 0; font-weight: 100" v-for="item in goodData.sortingInventory" :key="item.stageName">
            {{ item.stageName }}
          </th>
          <th style="padding: 10px 0; font-weight: 100">合计</th>
        </tr>
        <tr style="font-size: 13px; font-weight: 100">
          <td style="padding: 10px 0" v-for="(item, index) in goodData.sortingInventory" :key="index">
            {{ item.actualInventory }}
          </td>
          <td style="padding: 10px 0">{{ goodData.sortingInventorySum }}</td>
        </tr>
      </table>
    </div>
    <div class="filter-item-title">可销售库存分布</div>
    <div class="filter-item-table">
      <el-table
        stripe
        border
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{
          textAlign: 'center',
          fontWeight: '100',
          fontSize: '13px',
          color: 'white',
          backgroundColor: '#009688'
        }"
        style="width: 100%"
        :data="goodData.salesInventory"
      >
        <el-table-column label="所属规格" prop="specsName" />
        <el-table-column label="入库总量(份)" prop="collectNumber" />
        <el-table-column label="销售总量(份)" prop="saleNumber" />
        <el-table-column label="商品结余(份)" prop="surplusNumber" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="text" @click="handleHistory(scope.row.specsId)">流水记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="tsx" setup name="Detail">
import { Inventory } from "@/api/interface/province/inventory";
import { getInventoryDetailAPI } from "@/api/modules/province/inventoryAPI";
import { DocumentCopy } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const goodData = ref<Inventory.GoodData>({
  goodsName: "string",
  goodsId: "string",
  sortingInventory: [
    {
      stageName: "string",
      actualInventory: "string"
    }
  ],
  sortingInventorySum: "string",
  salesInventory: [
    {
      specsId: 0,
      specsName: "string",
      collectNumber: "string",
      saleNumber: "string",
      surplusNumber: "string"
    }
  ]
});
const getGoodsDetail = async (goodsId: string) => {
  const { data, code, msg } = await getInventoryDetailAPI(goodsId);
  if (code == "200" && data) {
    goodData.value = data;
    goodData.value.sortingInventorySum = String(
      goodData.value.sortingInventory.reduce((pre, cur) => Number(pre) + Number(cur.actualInventory), 0)
    );
  } else {
    ElMessage.error(msg);
  }
};
const handleHistory = (specsId: number) => {
  router.push({ path: "/provinceLevel/proInventory/history", query: { specsId: specsId, goodsId: route.query.goodsId } });
};
onMounted(() => {
  if (route.query.goodsId != undefined) {
    getGoodsDetail(route.query.goodsId as string);
  }
});
</script>

<style lang="scss" scoped>
.filter-container {
  padding: 15px;
  background: white;
}
.filter-item-top {
  padding: 10px;
  border: 1px solid #e2e2e2;
  span {
    display: inline-block;
    margin-right: 20px;
    font-size: 13px;
    color: gray;
  }
}
.filter-item-title {
  padding: 15px 0;
  font-size: 13px;
  font-weight: bold;
}
.filter-item-table {
  border: 1px solid #e2e2e2;
}
::v-deep .el-table .cell {
  font-size: 13px;
}
</style>
